<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>异步</title>
	<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
    </style>
</head>
<body>
	<div class="container">
		<h1>异步</h1>
	</div>
	<script src="https://cdn.staticfile.org/jquery/3.2.0/jquery.js"></script>
	<script type="text/javascript">
	function f1(callback, milliseconds = 2000) {
		setTimeout(() => {
			console.log('f1')
			callback('异步 setTimeout f1 ' + milliseconds)
		}, milliseconds)
	}
	function f2(callback, milliseconds = 1000) {
		setTimeout(() => {
			callback('异步 setTimeout f2 ' + milliseconds)
			console.log('f2')
		}, milliseconds)
	}

	console.log('--------开始----\n')

	console.time('f1')
	f1(function(data) {
		console.log(data)
		console.timeEnd('f1')
	})
	console.log(' 执行中 ...........')

	console.time('f2')
	f2(function(data) {
		console.log(data)
		console.timeEnd('f2')
	})

	console.log('--------结束----\n')
	

	</script>
</body>
</html>